<template>
  <div class="identify-container">
    <div class="content_l">
      <vxe-toolbar>
        <template #buttons>
          <vxe-button @click="$refs.xTree.setAllTreeExpand(true)"
            >全部展开</vxe-button
          >
          <vxe-button @click="$refs.xTree.clearTreeExpand()"
            >全部关闭</vxe-button
          >
        </template>
      </vxe-toolbar>
      <vxe-table
        highlight-current-row
        highlight-hover-row
        :show-header="false"
        show-overflow
        ref="xTree"
        border="inner"
        :data="depList"
        :tree-config="{
          children: 'children',
          transform: false,
          parentKey: 'parentId',
          line: true,
          iconOpen: 'el-icon-remove',
          iconClose: 'el-icon-circle-plus',
        }"
        class="left-table"
      >
        <vxe-column tree-node show-overflow>
          <template #default="{ row }">
            <span>
              <!-- <img src="../../../assets/icons/png/contextMenu.gif" alt="" @click.stop="openMenu(row,$event)"> -->
              <i
                class="tree-node-icon fa"
                :class="
                  $refs.xTree.isTreeExpandByRow(row)
                    ? 'el-icon-folder-opened'
                    : 'el-icon-folder'
                "
              ></i>
              <span
                @click="clickListRow(row)"
                style="cursor: pointer; fontsize: 12px; color: #000"
              >
                {{ row.label }} {{ row.id ? "(" + row.num + "条)" : null }}
              </span>
            </span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="content_r">
      <div class="content-wrap my-search" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <!-- 审核标识，0-未审核，1-审核通过，2-审核不通过,3-审核退回 -->
          <el-form-item label="审核状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择审核状态"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in identityStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="上传时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="标识分类" prop="identifyClassify">
            <!-- <el-input v-model="queryParams.indetifyClassifyOptions" placeholder="请输入标识分类" clearable size="small" @keyup.enter.native="handleQuery" /> -->
            <el-select
              v-model="queryParams.classifyId"
              placeholder="请选择标识分类"
              clearable
              size="small"
              @change="classifyChange"
            >
              <el-option
                v-for="item in indetifyClassifyOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标识名称" prop="identifyName">
            <!-- <el-input v-model="queryParams.identifyNameOptions" placeholder="请输入标识名称" clearable size="small" @keyup.enter.native="handleQuery" /> -->
            <el-select
              v-model="queryParams.nameId"
              placeholder="请选择标识名称"
              clearable
              size="small"
            >
              <el-option
                v-for="item in identifyNameOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="设计制作供应商"
            prop="company"
            label-width="100px"
          >
            <el-input
              v-model="queryParams.company"
              placeholder="请输入设计制作供应商"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['identify:add']"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5" v-if="false">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate(null, 'xiugai')"
            v-hasPermi="['identify:edit']"
          >
            修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['identify:remove']"
            >删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['identify:export']"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-s-check"
            size="mini"
            :disabled="multiple"
            @click="handlePiliangShenhe"
            v-hasPermi="['identify:audit']"
            >批量审核</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-checkbox-group
            v-model="checkAll"
            size="mini"
            @change="handleCheckAllChange"
          >
            <el-checkbox-button label="全选"></el-checkbox-button>
          </el-checkbox-group>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <div style="flex: 1" ref="el_table">
        <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->

        <el-checkbox-group v-model="ids" @change="handleCheckedCitiesChange">
          <div
            class="img-list"
            :style="{ height: Tbheight }"
            :class="{ empty: identifyList.length == 0 }"
          >
            <ElMyCard
              :imgDetail="item"
              v-for="(item, k) in identifyList"
              :key="k"
              @shenhe="handleShenhe"
              @chexiaoShenhe="handleChexiaoShenhe"
              @xiugai="handleUpdate"
              @shanchu="handleDelete"
              @xiangqing="handleDetail"
              @downSpd="handleDownloadSpd"
            ></ElMyCard>
            <el-empty
              :image-size="200"
              v-if="identifyList.length == 0"
            ></el-empty>
            <i class="i"></i>
            <i class="i"></i>
            <i class="i"></i>
            <i class="i"></i>
            <i class="i"></i>
          </div>
        </el-checkbox-group>
      </div>

      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改对话框 -->

    <el-drawer
      :title="title"
      :visible.sync="drawer"
      size="550px"
      :before-close="handleClose"
      :wrapperClosable="true"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="identifyForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="120px"
      >
        <el-form-item label="标识类别" prop="classifyId">
          <el-select
            :disabled="buttonType == 'shenhe'"
            v-model="formData.classifyId"
            placeholder="请选择标识类别"
            clearable
            :style="{ width: '100%' }"
            @change="classifyChange"
          >
            <el-option
              v-for="(item, index) in indetifyClassifyOptions"
              :key="index"
              :label="item.label"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标识名称" prop="nameId">
          <el-select
            :disabled="buttonType == 'shenhe'"
            v-model="formData.nameId"
            placeholder="请选择标识名称"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in identifyNameOptions"
              :key="index"
              :label="item.label"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标识位置" prop="location">
          <el-input
            :disabled="buttonType == 'shenhe'"
            v-model="formData.location"
            placeholder="写明单位和具体位置 例：国网万荣供电公司中心营业厅"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="标识数量" prop="num">
          <el-input-number
            disabled
            v-model="formData.num"
            :min="1"
            placeholder="请输入标识数量 只能是1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="设计制作供应商" prop="company">
          <el-input
            :disabled="buttonType == 'shenhe'"
            v-model="formData.company"
            placeholder="写明制作供应商（供应商全称）"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="制作日期" prop="productTime">
          <el-date-picker
            :disabled="buttonType == 'shenhe'"
            v-model="formData.productTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择制作日期"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="管理人员" prop="manager">
          <el-input
            :disabled="buttonType == 'shenhe'"
            v-model="formData.manager"
            placeholder="各单位标识管理人员"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="上传图片" prop="validateImg1">
          <div class="uploadImg">
            <!-- 0-未审核，1-审核通过，2-审核不通过,3-审核退回   status!=1  可以修改上传图片&&!=审核 -->
            <el-upload
              class="avatar-uploader"
              ref="uploadImg"
              list-type="picture-card"
              :file-list="formData.uploadImgList"
              :action="uploadFileUrl"
              multiple
              :on-success="handleUploadSuccess"
              :before-upload="handleBeforeUpload"
              :before-remove="handleBeforeRemove"
              :headers="headers"
              name="uploadfile"
              :disabled="formData.status == 1 || buttonType == 'shenhe'"
              :fileSize="5"
              :on-preview="handlePictureCardPreview"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="el-upload__tip">
            只能上传jpg/jepg/png文件，且不超过5Mb
          </div>
        </el-form-item>
        <el-form-item
          label="审核意见"
          prop="opinion"
          v-if="buttonType == 'shenhe'"
        >
          <el-input
            type="textarea"
            v-model="formData.opinion"
            placeholder="请输入审核意见"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="审核记录" v-if="formData.identifyId">
          <div style="height: 200px; overflow: auto">
            <el-timeline>
              <el-timeline-item
                v-for="item in shenheHistoryList"
                :key="item.id"
                :timestamp="item.auditTime"
                placement="top"
              >
                <h4>
                  用户[<font color="red">{{ item.auditUser }}</font> ]
                  =>执行操作<font color="red"
                    >{{ item.info
                    }}{{
                      selectDictLabel(identityStatusOptions, item.status)
                    }}</font
                  >
                </h4>
                <p>
                  审核意见 <font color="red">{{ item.opinion || "无" }}</font>
                </p>
              </el-timeline-item>
            </el-timeline>
            <font color="red" v-if="shenheHistoryList.length == 0">
              此标识没有相关记录！
            </font>
          </div>
        </el-form-item>

        <el-form-item label="矢量图" prop="validateImg2" v-if="false">
          <!-- 0-未审核，1-审核通过，2-审核不通过,3-审核退回   status!=1  可以修改上传图片&&!=shenhe -->
          <FileUpload
            ref="fileUpload"
            :fileSize="200"
            :value="formData.imgList"
            :fileType="fileType"
            :limit="limit"
            @input="uploadSuccess"
            @delete="deleteFile"
            :disable="formData.status != 1 && buttonType != 'shenhe'"
          ></FileUpload>
        </el-form-item>
        <el-form-item label="标识应用说明" prop="remark">
          <el-input
            type="textarea"
            :disabled="buttonType == 'shenhe'"
            v-model="formData.remark"
            placeholder="未上传的与此相同的标识有几个"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="el-drawer__foot" v-if="buttonType != 'shenhe'">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
      <div class="el-drawer__foot" v-else>
        <el-button type="info" @click="subShenhe(3)">审核退回</el-button>
        <el-popover
          placement="right-end"
          class="popover"
          style="height: 500px"
          width="500"
          trigger="click"
          @show="getListShenheHistory()"
        >
          <!-- <p class="el-dialog__header" style="fontSize:24px" slot="reference">文章状态记录及点评意见</p> -->
          <h3 style="margin-bottom: 4px">
            <font color="red">审核记录日志：</font>
          </h3>
          <el-timeline>
            <el-timeline-item
              v-for="item in shenheHistoryList"
              :key="item.id"
              :timestamp="item.auditTime"
              placement="top"
            >
              <h4>
                用户[<font color="red">{{ item.auditUser }}</font> ]
                =>执行操作<font color="red"
                  >{{ item.info
                  }}{{
                    selectDictLabel(identityStatusOptions, item.status)
                  }}</font
                >
              </h4>
              <p>
                审核意见 <font color="red">{{ item.opinion || "无" }}</font>
              </p>
            </el-timeline-item>
          </el-timeline>
          <font color="red" v-if="shenheHistoryList.length == 0">
            此标识没有相关记录！
          </font>
          <el-button slot="reference" type="danger">审核记录</el-button>
        </el-popover>
        <el-button type="danger" @click="subShenhe(2)" v-if="false"
          >审核不通过</el-button
        >
        <el-button type="success" @click="subShenhe(1)">审核通过</el-button>
      </div>
    </el-drawer>

    <el-drawer
      :title="title"
      :visible.sync="drawer2"
      size="550px"
      :wrapperClosable="true"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="identifyForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="120px"
      >
        <div v-if="false">
          已选择的标识名称：
          <span v-for="(item, k) in names" :key="k" style="margin: 0 4px"
            >{{ item ? k : null }} {{ item || null }}</span
          >
        </div>

        <el-form-item label="审核意见" prop="opinion">
          <el-input
            type="textarea"
            v-model="formData.opinion"
            placeholder="请输入审核意见"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div class="el-drawer__foot">
        <el-button type="info" @click="subShenhe(3)">审核退回</el-button>
        <el-button type="success" @click="subShenhe(1)">审核通过</el-button>
      </div>
    </el-drawer>

    <el-dialog
      :title="title"
      :visible.sync="imgItemOpen"
      width="60%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-dialogDrag
      custom-class="img-preview-dialog"
    >
      <ImagePreview
        ref="imgItemOpen"
        :imgDetail="imgDetail"
        :thumbnailImgList="thumbnailImgList"
        :shenheHistoryList="shenheHistoryList"
      ></ImagePreview>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="subShenhe2(3)">审核退回</el-button>
        <el-button
          type="primary"
          @click="subShenhe2(1)"
          v-if="imgDetail.status == 0"
          >审核通过</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { downLoadZip } from "@/utils/zipdownload";
import {
  listIdentify,
  getIdentify,
  delIdentify,
  addIdentify,
  updateIdentify,
  auditIdentify,
  exportIdentify,
  identifyClassify,
  identifyDept,
  downLoadIdentify,
  identifyDetail,
  resetAudit,
  getIdentifyAuditList,
  downLoadApproval,
  exportByIds,
} from "@/api/identity/identify";
import { treeselectCategory } from "@/api/identity/category";
import { deepClone } from "@/utils/index.js";
import { getToken } from "@/utils/auth";

import { mapGetters, mapState } from "vuex";

export default {
  name: "Identify",

  data() {
    var validateImg1 = (rule, value, callback) => {
      let index = this.formData.imgList.findIndex((item) => {
        return item.type == 1;
      });
      if (index < 0) {
        callback(new Error("请上传缩略图"));
      } else {
        callback();
      }
    };
    var validateImg2 = (rule, value, callback) => {
      let index = this.formData.imgList.findIndex((item) => {
        return item.type == 2;
      });
      if (index < 0) {
        callback(new Error("请上传矢量图"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //全选
      checkAll: false,
      //全选不确定状态
      isIndeterminate: false,
      // 选中数组
      ids: [],
      //选中数组的  标识名称
      names: [],
      Tbheight: "500px",
      //当前左侧行
      identityRow: {},

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      identifyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      drawer: false,
      drawer2: false,
      //详情
      imgItemOpen: false,
      imgDetail: {},
      //轮播图
      thumbnailImgList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: "0",
      },
      // 日期范围
      // dateRange: [new Date(new Date().getMonth+1,), new Date()],
      dateRange: [],

      // 表单参数
      unChange: [false, false], //表单是否发生变化
      formDataCache: {},
      formData: {
        classifyId: undefined,
        nameId: undefined,
        location: undefined,
        num: 1,
        company: undefined,
        productTime: undefined,
        manager: undefined,
        creCompany: undefined,
        remark: 1,
        type: "1",
        imgList: [],
        imgList2: [],
        thumbnailImg: [],
      },
      // 表单校验
      rules: {
        classifyId: [
          { required: true, message: "请选择标识类别", trigger: "change" },
        ],
        nameId: [
          { required: true, message: "请选择标识名称", trigger: "change" },
        ],
        location: [
          { required: true, message: "请输入标识位置", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入标识数量", trigger: "blur" }],
        company: [
          {
            required: true,
            message: "请输入设计制作供应商",
            trigger: "change",
          },
        ],
        productTime: [
          { required: true, message: "请选择日期", trigger: "change" },
        ],
        manager: [
          { required: true, message: "请输入管理人员", trigger: "change" },
        ],
        remark: [
          { required: false, message: "请输入标识应用说明", trigger: "change" },
        ],
        validateImg1: [{ validator: validateImg1 }],
        validateImg2: [{ validator: validateImg2 }],
      },
      //标识类别
      indetifyClassifyOptions: [],
      //标识名称
      identifyNameOptions: [],
      //审核状态
      identityStatusOptions: [],
      //左侧部门列表
      depList: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/identify/upload", // 上传的图片服务器地址
      headers: {
        Authorization: getToken(),
      },
      fileType: ["jpg", "jepg", "png"],
      limit: 1,

      //按钮类型  修改 审核 删除
      buttonType: "",
      //审核记录
      shenheHistoryList: [],
    };
  },
  computed: {
    // ...mapGetters(["userInfo"]),
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch: {
    formData: {
      handler(val) {
        console.log("val: ", val);
        if (this.unChange[1]) return;
        for (let i in this.formData) {
          if (typeof val[i] == "object") continue;
          if (val[i] != this.formDataCache[i]) {
            console.log("i: ", i);
            console.log("this.formDataCache[i]: ", this.formDataCache[i]);
            console.log("val[i]: ", val[i]);
            console.log(
              "val[i] != this.formDataCache[i]: ",
              val[i] != this.formDataCache[i]
            );
            this.unChange[0] = true;
            break;
          } else {
            this.unChange[0] = false;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getList();
    this.getIdentifyCategory();
    this.getIdentifyDept();
    this.getDicts("iden_status").then((response) => {
      this.identityStatusOptions = response.data;
    });
  },
  methods: {
    /** 查询列表
     * thumbnailImg  展示缩略图
     * uploadImgList  上传回显图片列表   点击修改 重新获取该行信息
     * 上传成功 修改uploadimgList,
     */
    getList() {
      console.log(" this.dateRange: ", this.dateRange);
      listIdentify(this.addDateRange(this.queryParams, this.dateRange))
        .then((response) => {
          this.total = response.total;
          response.rows.forEach((item) => {
            item.thumbnailImg = [];
            let list = deepClone(item.imgList);

            list.forEach((item2) => {
              item2.url = `${process.env.VUE_APP_BASE_API}${item2.url}`;
              item2.type == 1 && item.thumbnailImg.push(item2.url);
            });
          });
          this.identifyList = response.rows;
        })
        .then(() => {
          this.$nextTick(() => {
            console.log(
              "this.$refs.el_table: ",
              this.$refs.el_table,
              this.$refs.el_table.clientHeight
            );
            this.Tbheight = this.$refs.el_table.clientHeight + "px";
          });
        });
    },
    handleDownloadSpd(row) {
      console.log("row: ", row);
      // downLoadApproval({ identifyId: row.identifyId }).then((res) => {
      //   console.log("res: ", res);
      //   // let exportName = res;
      //   // row.classifyName + "_" + row.name + "_" + row.location + "_";
      //   downLoadZip(res, "docx");
      // });

      downLoadZip(
        "/identify/downLoadApproval",
        { identifyId: row.identifyId },
        "docx"
      );
    },
    /**获取分类列表 */
    getIdentifyCategory() {
      treeselectCategory().then((res) => {
        console.log(res);
        this.indetifyClassifyOptions = res.data;
      });
    },
    /**获取分类列表 */
    getIdentifyDept() {
      identifyDept()
        .then((res) => {
          console.log(res);
          let quanbu = { id: null, label: "全部", children: [] };
          res.data.unshift(quanbu);
          this.depList = res.data;
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.clickListRow(this.depList[0], true);
            this.$refs.xTree.setCurrentRow(this.depList[0]);
            this.$refs.xTree.setTreeExpand(this.depList[1], true);
          });
        });
    },
    //标识类别发生改变时
    classifyChange(classify) {
      console.log(" classify: ", classify);
      console.log(
        "this.indetifyClassifyOptions: ",
        this.indetifyClassifyOptions
      );
      let a = this.indetifyClassifyOptions.find((item) => {
        return item.id == classify;
      });
      console.log("a : ", a);
      this.identifyNameOptions = a.children;
      console.log("this.identifyNameOptions: ", this.identifyNameOptions);
    },
    //点击左侧部门列表
    clickListRow(row, flag) {
      console.log("row: ", row);
      this.identityRow = row;
      this.queryParams = {
        creCompany: row.id,
        pageNum: 1,
        pageSize: 10,
      };
      if (flag) {
        const end = new Date();
        let y = end.getFullYear();
        let m = end.getMonth();
        let d = end.getDate();
        const start = new Date(y, m - 1, d);
        this.dateRange = [
          this.parseTime(start, "{y}-{m}-{d}"),
          this.parseTime(end, "{y}-{m}-{d}"),
        ];
        this.queryParams.status = "0";
      }

      this.getList();
    },
    //缩略图上传之前
    handleBeforeUpload(file) {
      console.log("file: ", file);
      // console.log("file: ", file);

      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join(" ， ")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleBeforeRemove(file, fileList) {
      console.log("file: ", file);
      return this.$confirm(`确定删除图片？`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let index = this.formData.imgList.findIndex((item) => {
            return item.imgId == file.imgId;
          });
          this.formData.imgList.splice(index, 1);
          this.unChange[1] = true;
          console.log(" this.unChange: ", this.unChange);

          return true;
        })

        .catch(() => {
          return false;
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*缩略图上传成功*/
    // handleUploadSuccess(res, file) {
    //   console.log("res, file: ", res, file);
    //   let obj = {
    //     url: res.url,
    //     // imgId: this.formData.thumbnailImg[0].imgId,
    //     type: 1,
    //   };
    //   this.formData.thumbnailImg = [
    //     {
    //       url2: process.env.VUE_APP_BASE_API + res.url,
    //       type: 1,
    //     },
    //   ];
    //   this.formData.imgList2 = [process.env.VUE_APP_BASE_API + res.url];

    //   let type2 = this.formData.imgList.filter((item) => {
    //     return item.type == 2;
    //   });
    //   console.log("obj: ", obj);
    //   type2.push(obj);

    //   this.formData.imgList = type2;
    //   console.log("this.formData: ", this.formData);
    // },
    handleUploadSuccess(res, file) {
      console.log("res, file: ", res, file);
      let obj = {
        url: res.url,
        type: 1,
      };
      this.unChange[1] = true;
      this.formData.imgList.push(obj);
      // this.formData.uploadImgList.push({
      //   url: `${process.env.VUE_APP_BASE_API}${res.url}`,
      // });
    },
    uploadSuccess(res) {
      let arr = [];
      let obj = {};
      res.forEach((item) => {
        console.log("item: ", item);
        obj = {
          type: 2,
          url: item.response.url,
        };
        arr.push(obj);
        console.log("obj: ", obj);
      });
      console.log("arr: ", arr);
      let type1 = this.formData.imgList.filter((item) => {
        return item.type == 1;
      });
      console.log("type1: ", type1);
      arr.push(...type1);
      this.formData.imgList = arr;
      console.log("this.formData.imgList: ", this.formData.imgList);
    },
    deleteFile(ids, index) {
      console.log("ids, index: ", ids, index);
    },
    //标识审核记录
    getListShenheHistory(row) {
      const identifyId = row ? row.identifyId : this.formData.identifyId;
      console.log("identifyId: ", identifyId);
      getIdentifyAuditList({ identifyId: identifyId }).then((res) => {
        console.log("res: ", res);
        this.shenheHistoryList = res.data;
      });
    },
    //抽屉关闭前
    handleClose(done) {
      console.log("this.unChange: ", this.unChange);
      if (this.unChange[0] == false && this.unChange[1] == false) {
        this.reset();
        done();
        return;
      }
      this.$confirm("当前页面有未保存的内容，是否确认提交更改？")
        .then((_) => {
          if (this.buttonType != "shenhe") {
            this.submitForm();
          } else {
            this.subShenhe(1);
          }
        })
        .catch((_) => {
          this.reset();
          done();
        });
    },
    // 取消按钮
    cancel() {
      this.drawer = false;
      this.imgItemOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        classifyId: undefined,
        nameId: undefined,
        location: undefined,
        num: 1,
        company: undefined,
        productTime: undefined,
        manager: undefined,
        creCompany: undefined,
        remark: undefined,
        type: "1",
        imgList: [],
        imgList2: [],
        thumbnailImg: [],
        uploadImgList: [],
        // creCompany: this.userInfo.deptId,
      };
      this.buttonType = "";
      this.resetForm("identifyForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log("this.queryParams: ", this.queryParams);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.classifyId = undefined;
      this.queryParams.nameId = undefined;
      this.queryParams.status = undefined;
      this.handleQuery();
    },

    //多选
    handleCheckAllChange(val) {
      console.log("val: ", val);
      this.ids = val
        ? this.identifyList.map((item) => {
            return item.identifyId;
          })
        : [];
      this.isIndeterminate = false;
    },
    //单选
    handleCheckedCitiesChange(value) {
      console.log("value: ", value);
      this.multiple = !value.length;
      let checkedCount = value.length;

      //选中的==当前页全部
      this.checkAll = checkedCount === this.identifyList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.identifyList.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.drawer = true;
      this.title = "新增标识信息";
      this.formDataCache = deepClone(this.formData);
      console.log(" this.formDataCache: ", this.formDataCache);
      console.log("this.formData: ", this.formData);
    },
    /**审核按钮    type=='shenhe'*/
    handleShenhe(row, type) {
      console.log("type: ", type);
      // this.classifyChange(row.classifyId);

      console.log("this.buttonType: ", this.buttonType);
      console.log("row: ", row);
      this.reset();
      const identifyId = row.identifyId;
      this.getListShenheHistory(row);
      identifyDetail(identifyId)
        .then((response) => {
          this.buttonType = type;
          console.log("response: ", response);
          response.data.uploadImgList = [];
          let list = deepClone(response.data.imgList);
          list.forEach((item2) => {
            item2.type == 1 &&
              response.data.uploadImgList.push({
                url: `${process.env.VUE_APP_BASE_API}${item2.url}`,
                imgId: item2.imgId,
              });
          });

          this.formData = response.data;
          this.formDataCache = deepClone(this.formData);
        })
        .then(() => {
          this.drawer = true;
          this.title = "审核标识信息";
          this.$nextTick(() => {
            this.$refs.uploadImg.$el.lastChild.style.display = "none";
            console.log(
              "this.$refs.uploadImg: ",
              this.$refs.uploadImg.$el.lastChild
            );
          });
        });
    },

    /** 修改按钮操作   type=='xiugai'*/
    handleUpdate(row, type) {
      this.buttonType = type;
      console.log("row: ", row);
      this.reset();
      const identifyId = row.identifyId;
      this.getListShenheHistory(row);
      identifyDetail(identifyId).then((response) => {
        console.log("response: ", response);
        response.data.uploadImgList = [];
        let list = deepClone(response.data.imgList);
        this.classifyChange(response.data.classifyId);
        list.forEach((item2) => {
          item2.type == 1 &&
            response.data.uploadImgList.push({
              url: `${process.env.VUE_APP_BASE_API}${item2.url}`,
              imgId: item2.imgId,
            });
        });

        this.formData = response.data;
        this.formDataCache = deepClone(this.formData);
        this.drawer = true;
        this.title = "修改标识信息";
        this.unChange = [false, false];
      });
    },

    /**撤销审核 */
    handleChexiaoShenhe(row, type) {
      console.log("type: ", type);
      console.log("row: ", row);
      resetAudit({ identifyIds: row.identifyId }).then(() => {
        this.getList();
        this.msgSuccess("撤销成功");
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log("this.formData: ", this.formData);

      this.$refs["identifyForm"].validate((valid) => {
        if (valid) {
          if (this.formData.identifyId != null) {
            updateIdentify(this.formData).then((response) => {
              this.msgSuccess("修改成功");
              this.drawer = false;
              this.reset();
              this.getList();
            });
          } else {
            addIdentify(this.formData).then((response) => {
              this.msgSuccess("新增成功");
              this.drawer = false;
              this.reset();
              this.getList();
            });
          }
        }
      });
    },
    //审核提交按钮
    subShenhe(status) {
      auditIdentify({
        identifyIds: this.formData.identifyId || this.ids.join(","),
        opinion: this.formData.opinion || "",
        status: status,
      }).then((res) => {
        console.log("res: ", res);
        this.msgSuccess(res.msg);
        this.drawer = false;
        this.drawer2 = false;
        this.ids = [];
        this.reset();
        this.getList();
      });
    },
    subShenhe2(status) {
      this.$prompt("请输入审核意见", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputErrorMessage: "邮箱格式不正确",
      })
        .then(({ value }) => {
          auditIdentify({
            identifyIds: this.imgDetail.identifyId,
            opinion: value || "",
            status: status,
          }).then((res) => {
            console.log("res: ", res);
            this.imgItemOpen = false;
            this.ids = [];
            this.reset();
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消审核",
          });
        });
    },
    /**上传前回调 */
    imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    // let isAccept = new RegExp("image/*").test(file.type);
    //       if (!isAccept) {
    //         this.$message.error("应该选择image/*类型的文件");
    //       }
    //       return isRightSize && isAccept;
    //     },
    /** 删除按钮操作 */
    handleDelete(row) {
      const identifyIds = row.identifyId || this.ids;
      this.$confirm(
        '是否确认删除编号为"' + identifyIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delIdentify(identifyIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
          this.ids = [];
          this.multiple = true;
        });
    },
    //详情
    handleDetail(row) {
      console.log("row: ", row);
      this.imgDetail = row;
      this.title = row.name + "-标识详情";
      this.thumbnailImgList = row.thumbnailImg;
      this.getListShenheHistory(row);
      this.$nextTick(() => {
        this.imgItemOpen = true;
        this.$nextTick(() => {
          this.$refs.imgItemOpen.activeId = 0;
        });
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      let flag = false;
      if (this.ids.length > 0) {
        flag = true;
      }
      this.$confirm(
        flag
          ? `确定导出已勾选的${this.ids.length}条数据？`
          : "确定导出筛选条件的所有数据？",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          console.log(
            "this.addDateRange(this.queryParams, this.dateRange): ",
            this.addDateRange(this.queryParams, this.dateRange)
          );
          const queryParams = this.queryParams;
          // this.queryParams.params["beginTime"] = this.dateRange[0];
          // this.queryParams.params["endTime"] = this.dateRange[1];
          // console.log("this.queryParams: ", this.queryParams);

          return flag
            ? exportByIds({ identifyIds: this.ids.join(",") })
            : exportIdentify(queryParams);
        })
        .then((response) => {
          console.log("response: ", response);
          this.ids = [];
          this.resolveBlob2(response, "xlsx", "下载");
        })
        .catch(() => {});
    },
    /**批量审核 */
    handlePiliangShenhe() {
      this.drawer2 = true;
      this.title = "审核标识信息";
      const identifyIds = this.ids;
      this.names = this.identifyList.map((item) => {
        console.log("item: ", item);
        if (identifyIds.includes(item.identifyId)) {
          return item.name || null;
        }
      });
      console.log(" this.names: ", this.names);
      console.log("identifyIds: ", identifyIds);
    },
  },
};
</script>
<style lang="scss" scoped>
.identify-container {
  display: flex;
  flex-direction: row;
  .content_l {
    min-width: 240px;
    height: 100%;
    background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
    }
  }
  .content_r {
    flex: 1;
    width: 0;
    margin: 0 0 0 10px;
    overflow: auto;
    padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.uploadImg {
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 标题图片上传
  ::v-deep .avatar-uploader {
    // height: 160px;
    border: 1px dashed #4e4d4d;
    padding: 4px;
    border-radius: 6px;
    .el-upload {
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    max-width: 100%;
    height: 150px;
    display: block;
  }
}

::v-deep .el-table .cell.el-tooltip {
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: pre-wrap;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
::v-deep .el-timeline-item {
  padding: 0;
}
</style>
<style lang="scss">
.el-popover.el-popper {
  height: 400px;
  overflow-x: hidden;
}
.el_table_flex {
  display: flex;
  flex-direction: column;
}
.img-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  overflow: auto;
  .i {
    width: 350px;
  }
}
.img-list.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: 40px 0;
}
.img-preview-dialog {
  .el-dialog__body {
    height: 70vh;
    padding: 0 10px;
  }
}
</style>
